<template>
  <div class="image-matting">
    <div class="container">
      <!-- 标题 -->
      <div class="header">
        <h1>
          <img src="https://free-1325650170.cos.ap-guangzhou.myqcloud.com/free_convert/freeconvert-logo.svg" alt="FreeConvert Logo" class="logo-icon"/>
          图片抠图在线工具
        </h1>
        <p class="subtitle">智能抠图，自动移除背景，保留主体，生成透明PNG</p>
      </div>

      <!-- 上传与预览区域 -->
      <div class="upload-section">
        <!-- 上传区域 -->
        <div v-if="!selectedFile && !isUploading"
          class="upload-area" 
          :class="{ 'drag-over': isDragOver }"
          @drop.prevent="handleDrop"
          @dragover.prevent="isDragOver = true"
          @dragleave.prevent="isDragOver = false"
          @click="$refs.fileInput.click()"
        >
          <input 
            type="file" 
            ref="fileInput" 
            accept="image/*"
            @change="handleFileSelect"
            style="display: none"
          />
          
          <div class="upload-placeholder">
            <div class="upload-icon">📁</div>
            <p class="upload-text">点击选择或拖拽图片到这里</p>
            <p class="upload-hint">支持 JPG、PNG、WEBP 等格式，最大 20MB</p>
            <button class="select-btn" @click.stop="$refs.fileInput.click()">选择图片</button>
          </div>
        </div>

        <!-- 工作台：左侧预览 / 右侧参数 -->
        <div v-if="imageUrl" class="workbench">
          <!-- 左侧：图片预览 -->
          <section class="preview-section">
            <div class="image-preview-wrapper">
              <img 
                :src="imageUrl" 
                alt="原始图片"
                class="image-preview"
                @load="handleImageLoaded"
                @error="handleImageError"
              />
              <div class="image-info">
                <span class="info-item">图片尺寸: {{ imageWidth }} × {{ imageHeight }}px</span>
                <span class="info-item">图片大小: {{ formatFileSize(selectedFile.size) }}</span>
              </div>
            </div>
            
          </section>

          <!-- 右侧：转换参数 -->
          <aside class="options-card">
            <h3>抠图参数</h3>
            
            <!-- 算法选择 -->
            <div class="option-group">
              <label class="option-label">
                <span>AI抠图算法</span>
                <div class="info-tooltip">
                  <span class="info-icon">ℹ️</span>
                  <div class="tooltip-content">
                    <p><strong>智能识别:</strong> AI自动选择最佳模型，最高精度</p>
                    <p><strong>BiRefNet:</strong> 最新高精度模型，边缘处理最佳</p>
                    <p><strong>ISNet:</strong> 速度快质量高，通用场景首选</p>
                    <p><strong>U2-Net:</strong> 经典稳定模型</p>
                    <p><strong>专用模型:</strong> 针对人物、动漫、服装优化</p>
                  </div>
                </div>
              </label>
              <select v-model="options.algorithm" class="option-select" :disabled="isUploading">
                <optgroup label="推荐模型">
                  <option value="">智能识别 - AI自动选择</option>
                  <option value="birefnet-general">BiRefNet 通用 - 最新高精度</option>
                  <option value="isnet-general-use">ISNet 通用 - 速度快</option>
                </optgroup>
                <optgroup label="人物/肖像专用">
                  <option value="birefnet-portrait">BiRefNet 人像 - 发丝级精度</option>
                  <option value="u2net_human_seg">U2Net 人物 - 专业人像</option>
                  <option value="silueta">Silueta - 艺术级人像</option>
                </optgroup>
                <optgroup label="特殊场景">
                  <option value="isnet-anime">ISNet 动漫 - 二次元/卡通</option>
                  <option value="u2net_cloth_seg">U2Net 服装 - 电商产品</option>
                  <option value="sam">SAM - 分割一切</option>
                </optgroup>
                <optgroup label="快速模型">
                  <option value="u2netp">U2Net Lite - 极速处理</option>
                  <option value="u2net">U2Net - 经典通用</option>
                </optgroup>
              </select>
              <!-- 算法描述 -->
              <p class="option-description" v-if="options.algorithm || options.algorithm === ''">
                {{ getAlgorithmDescription(options.algorithm) }}
              </p>
            </div>
            
            <!-- 处理模式选择 -->
            <div class="option-group">
              <label class="option-label">
                <span>处理模式</span>
                <div class="info-tooltip">
                  <span class="info-icon">ℹ️</span>
                  <div class="tooltip-content">
                    <p><strong>平衡模式:</strong> 速度与质量兼顾</p>
                    <p><strong>极速模式:</strong> 处理时间减少50%，适合批量处理</p>
                    <p><strong>高质量模式:</strong> 最高精度，适合专业需求</p>
                  </div>
                </div>
              </label>
              <div class="mode-options">
                <label class="mode-option" :class="{ 'active': options.processingMode === 'balanced' }">
                  <input 
                    type="radio" 
                    v-model="options.processingMode" 
                    value="balanced"
                    :disabled="isUploading"
                  />
                  <div class="mode-content">
                    <span class="mode-icon">⚖️</span>
                    <span class="mode-name">平衡模式</span>
                    <span class="mode-desc">速度快·质量高</span>
                  </div>
                </label>
                <label class="mode-option" :class="{ 'active': options.processingMode === 'fast' }">
                  <input 
                    type="radio" 
                    v-model="options.processingMode" 
                    value="fast"
                    :disabled="isUploading"
                  />
                  <div class="mode-content">
                    <span class="mode-icon">🚀</span>
                    <span class="mode-name">极速模式</span>
                    <span class="mode-desc">提速50%</span>
                  </div>
                </label>
                <label class="mode-option" :class="{ 'active': options.processingMode === 'quality' }">
                  <input 
                    type="radio" 
                    v-model="options.processingMode" 
                    value="quality"
                    :disabled="isUploading"
                  />
                  <div class="mode-content">
                    <span class="mode-icon">💎</span>
                    <span class="mode-name">高质量</span>
                    <span class="mode-desc">专业级精度</span>
                  </div>
                </label>
              </div>
              <p class="mode-hint">
                {{ getModeHint(options.processingMode) }}
              </p>
            </div>

            <!-- 背景颜色 -->
            <div class="option-group">
              <label class="option-label">
                <span>背景颜色</span>
              </label>
              <div class="background-options">
                <label class="radio-option">
                  <input 
                    type="radio" 
                    v-model="options.backgroundType" 
                    value="transparent"
                    :disabled="isUploading"
                  />
                  <span>透明背景</span>
                </label>
                <label class="radio-option">
                  <input 
                    type="radio" 
                    v-model="options.backgroundType" 
                    value="white"
                    :disabled="isUploading"
                  />
                  <span>白色背景</span>
                </label>
                <label class="radio-option">
                  <input 
                    type="radio" 
                    v-model="options.backgroundType" 
                    value="custom"
                    :disabled="isUploading"
                  />
                  <span>自定义颜色</span>
                </label>
              </div>
              <div v-if="options.backgroundType === 'custom'" class="color-picker-wrapper">
                <input 
                  type="color" 
                  v-model="options.backgroundColor" 
                  class="color-picker"
                  :disabled="isUploading"
                />
                <span class="color-value">{{ options.backgroundColor }}</span>
              </div>
            </div>

            <!-- 输出尺寸 -->
            <div class="option-group">
              <label class="option-label">
                <span>输出尺寸</span>
                <span class="option-hint">(留空保持原始尺寸)</span>
              </label>
              <div class="size-inputs">
                <div class="size-input-group">
                  <label>宽度</label>
                  <input 
                    type="number" 
                    v-model.number="options.width" 
                    placeholder="自动"
                    min="1"
                    max="10000"
                    class="option-input"
                    :disabled="isUploading"
                  />
                  <span class="unit">px</span>
                </div>
                <div class="size-separator">×</div>
                <div class="size-input-group">
                  <label>高度</label>
                  <input 
                    type="number" 
                    v-model.number="options.height" 
                    placeholder="自动"
                    min="1"
                    max="10000"
                    class="option-input"
                    :disabled="isUploading"
                  />
                  <span class="unit">px</span>
                </div>
              </div>
              <label class="checkbox-option">
                <input 
                  type="checkbox" 
                  v-model="options.keepAspectRatio"
                  :disabled="isUploading"
                />
                <span>保持宽高比</span>
              </label>
            </div>

            <!-- 输出质量 -->
            <div class="option-group">
              <label class="option-label">
                <span>输出质量</span>
                <span class="option-value">{{ options.quality }}%</span>
              </label>
              <input 
                type="range" 
                v-model.number="options.quality" 
                min="50" 
                max="100" 
                step="5"
                class="option-slider"
                :disabled="isUploading"
              />
              <div class="slider-marks">
                <span>50%</span>
                <span>75%</span>
                <span>100%</span>
              </div>
            </div>

            <!-- 开始转换按钮 -->
            <button 
              class="convert-btn" 
              @click="startConversion"
              :disabled="isUploading || !selectedFile"
            >
              <span v-if="!isUploading">开始抠图</span>
              <span v-else class="converting-content">
                <span class="spinner-small"></span>
                处理中...
              </span>
            </button>

            <!-- 处理提示 -->
            <div v-if="isUploading" class="upload-status">
              <p class="status-text">正在处理抠图...</p>
              <p class="status-hint">请稍候，AI算法正在分析图片</p>
            </div>
          </aside>
          
          <!-- 🔑 移动端：固定转换按钮（确保始终可见） -->
          <div v-if="imageUrl" class="mobile-convert-btn-wrapper">
            <button class="mobile-convert-btn" @click="startConversion" :disabled="isUploading || !selectedFile">
              <span v-if="!isUploading">开始抠图</span>
              <span v-else class="converting-content">
                <span class="spinner-small"></span>
                处理中...
              </span>
            </button>
          </div>
        </div>
      </div>

      <section class="tips-card">
        <h3>为什么选择 FreeConvert 图片抠图？</h3>
        <ul>
          <li>集成 BiRefNet、ISNet、U2-Net 等多种模型，人物与商品都能精准分割</li>
          <li>支持透明、白底或自定义背景，并可按需调整导出尺寸与质量</li>
          <li>上传即处理、完成后可手动微调，敏感素材全程加密传输</li>
        </ul>
      </section>
    </div>
  </div>
</template>

<script>
import { uploadAndConvertImageMatting } from '@/api/conversion'
import { showToast } from '@/utils/toast'

export default {
  name: 'ImageMattingView',
  data() {
    return {
      // 文件相关
      selectedFile: null,
      imageUrl: null,
      isDragOver: false,
      isUnmounting: false,
      
      // 图片信息
      imageWidth: 0,
      imageHeight: 0,
      
      // 转换参数
      options: {
        algorithm: '',  // 默认为空，使用AI智能识别
        processingMode: 'balanced',  // 处理模式：balanced/fast/quality
        backgroundType: 'transparent',
        backgroundColor: '#FFFFFF',
        width: null,
        height: null,
        keepAspectRatio: true,
        quality: 95
      },
      
      // 上传状态
      isUploading: false,
      
      // 用于防止循环更新
      isUpdatingSize: false
    }
  },
  watch: {
    // 监听宽度变化，自动调整高度
    'options.width'(newWidth) {
      if (this.isUpdatingSize || !this.options.keepAspectRatio) return
      if (!newWidth || !this.imageWidth || !this.imageHeight) return
      
      this.isUpdatingSize = true
      const aspectRatio = this.imageWidth / this.imageHeight
      this.options.height = Math.round(newWidth / aspectRatio)
      this.$nextTick(() => {
        this.isUpdatingSize = false
      })
    },
    // 监听高度变化，自动调整宽度
    'options.height'(newHeight) {
      if (this.isUpdatingSize || !this.options.keepAspectRatio) return
      if (!newHeight || !this.imageWidth || !this.imageHeight) return
      
      this.isUpdatingSize = true
      const aspectRatio = this.imageWidth / this.imageHeight
      this.options.width = Math.round(newHeight * aspectRatio)
      this.$nextTick(() => {
        this.isUpdatingSize = false
      })
    }
  },
  beforeUnmount() {
    this.isUnmounting = true
    // 清理blob URL，防止内存泄漏
    if (this.imageUrl) {
      const urlToRevoke = this.imageUrl
      this.imageUrl = null
      URL.revokeObjectURL(urlToRevoke)
    }
  },
  methods: {
    // 处理文件选择
    handleFileSelect(event) {
      const file = event.target.files[0]
      if (file) {
        this.processFile(file)
      }
    },
    
    // 处理拖拽上传
    handleDrop(event) {
      this.isDragOver = false
      const file = event.dataTransfer.files[0]
      if (file) {
        this.processFile(file)
      }
    },
    
    // 处理文件
    processFile(file) {
      // 验证文件类型
      if (!file.type.startsWith('image/')) {
        showToast('请选择图片文件', 'error')
        return
      }
      
      // 验证文件大小 (20MB)
      const maxSize = 20 * 1024 * 1024
      if (file.size > maxSize) {
        showToast('文件大小不能超过 20MB', 'error')
        return
      }
      
      // 如果已有blob URL，先清理
      if (this.imageUrl) {
        URL.revokeObjectURL(this.imageUrl)
      }
      
      this.selectedFile = file
      this.imageUrl = URL.createObjectURL(file)
    },
    
    // 图片加载完成
    handleImageLoaded(event) {
      this.imageWidth = event.target.naturalWidth
      this.imageHeight = event.target.naturalHeight
      
      // 自动填充原图尺寸到输出尺寸
      this.options.width = this.imageWidth
      this.options.height = this.imageHeight
    },
    
    // 图片加载错误处理
    handleImageError() {
      if (this.isUnmounting) {
        return
      }
      showToast('图片加载失败，请重新选择图片', 'error')
      // 清理状态
      if (this.imageUrl) {
        URL.revokeObjectURL(this.imageUrl)
      }
      this.imageUrl = null
      this.selectedFile = null
      this.imageWidth = 0
      this.imageHeight = 0
    },
    
    // 开始转换
    async startConversion() {
      if (!this.selectedFile) {
        showToast('请先选择图片', 'warning')
        return
      }
      
      try {
        this.isUploading = true
        this.uploadProgress = 0
        this.statusText = '正在上传图片...'
        this.statusHint = '请稍候，图片抠图需要一些时间'
        
        // 构建表单数据
        const formData = new FormData()
        formData.append('file', this.selectedFile)
        formData.append('algorithm', this.options.algorithm)
        
        // 设置背景颜色
        let bgColor = 'transparent'
        if (this.options.backgroundType === 'white') {
          bgColor = '#FFFFFF'
        } else if (this.options.backgroundType === 'custom') {
          bgColor = this.options.backgroundColor
        }
        formData.append('backgroundColor', bgColor)
        
        // 可选参数
        if (this.options.width) {
          formData.append('width', this.options.width)
        }
        if (this.options.height) {
          formData.append('height', this.options.height)
        }
        formData.append('keepAspectRatio', this.options.keepAspectRatio)
        formData.append('quality', this.options.quality)
        
        // 处理模式（用于后端优化）
        formData.append('processingMode', this.options.processingMode)
        
        // 根据处理模式调整算法
        if (this.options.processingMode === 'fast' && !this.options.algorithm) {
          // 极速模式：自动选择最快的模型
          formData.set('algorithm', 'u2netp')
        } else if (this.options.processingMode === 'quality' && !this.options.algorithm) {
          // 高质量模式：使用高精度模型
          formData.set('algorithm', 'birefnet-general')
        }
        
        // 上传并转换
        const response = await uploadAndConvertImageMatting(formData)
        
        // 保存抠图结果数据到 sessionStorage
        sessionStorage.setItem('mattingResult', JSON.stringify(response.data))
        
        // 跳转到成功页面
        this.$router.push({
          name: 'matting-success',
          params: { id: response.data.id }
        })
        
      } catch (error) {
        console.error('抠图失败:', error)
        showToast(error.message || '抠图失败，请重试', 'error')
        this.isUploading = false
      }
    },
    
    // 格式化文件大小
    formatFileSize(bytes) {
      if (bytes === 0) return '0 B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
    },
    
    // 获取算法描述
    getAlgorithmDescription(algorithm) {
      const descriptions = {
        '': 'AI自动分析图片内容，智能选择最佳抠图模型，精确识别主体',
        'birefnet-general': '最新的高质量通用模型，精确度最高，适合各种场景',
        'isnet-general-use': '速度快质量高的通用模型，平衡性能与效果',
        'u2net': '经典通用模型，稳定可靠，适合大多数场景',
        'u2netp': '轻量级快速模型，处理速度最快',
        'u2net_human_seg': '专门优化的人物识别，高精度人像抠图',
        'silueta': '艺术级人像抠图，边缘细腻自然',
        'u2net_cloth_seg': '服装专用模型，准确识别服饰边界',
        'birefnet-portrait': '最新人像模型，细节丰富，发丝级精度',
        'sam': 'Meta开发的分割一切模型，实验性功能',
        'isnet-anime': '动漫二次元专用，更高阈值 + 二值化处理，彻底去除背景残留，边缘清晰锐利'
      }
      return descriptions[algorithm] || '选择适合您需求的AI模型'
    },
    
    // 获取处理模式提示
    getModeHint(mode) {
      const hints = {
        'balanced': '推荐选择，自动压缩大图，智能优化处理流程',
        'fast': '极速处理，禁用复杂优化，大图自动压缩，适合批量处理',
        'quality': '专业级质量，保留原图尺寸，启用所有优化，适合商业用途'
      }
      return hints[mode] || ''
    }
  },
}
</script>

<style scoped>
.image-matting {
  min-height: 100vh;
  width: 100vw;
  background: #f5f7fa;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  /* 🔑 移动端：防止双击缩放 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  box-sizing: border-box;
  background: none;
}

/* 标题区域 */
.header {
  text-align: center;
  color: #1e293b;
  margin-bottom: 16px;
  animation: fadeInUp 0.8s ease-out;
  flex-shrink: 0;
}

.header h1 {
  font-size: 2rem;
  margin-bottom: 6px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.logo-icon {
  width: 240px;
  height: 180px;
  animation: fadeInUp 0.8s ease-out;
}

.subtitle {
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.4;
}

/* 上传区域 */
.upload-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 100%;
  animation: fadeInUp 0.6s ease-out both;
  box-sizing: border-box;
  /* 🔑 移动端：确保内容可见 */
  overflow: visible;
  min-height: auto;
}

.upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: #fafbfc;
}

.upload-area:hover,
.upload-area.drag-over {
  border-color: #667eea;
  background: #f0f4ff;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.upload-icon {
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
}

.upload-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
}

.upload-hint {
  color: #6b7280;
  font-size: 0.875rem;
}

.select-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.select-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* 工作台布局 - 与视频转gif一致 */
.workbench {
  width: 100%;
  background: white;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  align-items: start;
}

/* 左侧预览 */
.preview-section {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
}

.image-preview-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
  background: #f5f5f5;
  border-radius: 12px;
  overflow: hidden;
}

.image-preview {
  width: 100%;
  display: block;
  background: #f5f5f5;
  border-radius: 12px;
  max-height: 500px;
  object-fit: contain;
}

.image-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: 0.75rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  color: white;
  font-size: 0.85rem;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.image-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.change-btn {
  padding: 12px 24px;
  font-size: 1rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
}

.change-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(107, 114, 128, 0.5);
}

.change-btn:disabled {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

/* 右侧参数卡片 */
.options-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  /* 🔑 移动端：确保内容可见 */
  min-height: 0;
  overflow: visible;
}

.options-card h3 {
  margin: 0 0 12px 0;
  color: #1f2937;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}

.option-group {
  margin-bottom: 1rem;
}

.option-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 6px;
}

.option-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: #9ca3af;
}

.option-value {
  margin-left: auto;
  color: #667eea;
  font-weight: 700;
}

.option-select,
.option-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #edf0f4;
  border-radius: 8px;
  font-size: 0.88rem;
  transition: all 0.2s;
  background: #fff;
  color: #111827;
  font-weight: 500;
  box-sizing: border-box;
}

.option-select:focus,
.option-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.option-select:disabled,
.option-input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.7;
}

/* 背景选项 */
.background-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 12px;
  border: 1px solid #edf0f4;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
}

.radio-option:hover {
  border-color: #667eea;
  background: #f9fafb;
}

.radio-option input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.radio-option input[type="radio"]:checked + span {
  color: #667eea;
  font-weight: 600;
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
}

.color-picker {
  width: 60px;
  height: 40px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.color-value {
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  color: #4a5568;
  font-weight: 600;
}

/* 尺寸输入 */
.size-inputs {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.size-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
}

.size-input-group label {
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 500;
}

.size-input-group input {
  padding: 8px 28px 8px 10px;
}

.size-input-group .unit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #9ca3af;
  font-size: 0.85rem;
  pointer-events: none;
}

.size-separator {
  font-size: 1.1rem;
  color: #9ca3af;
  font-weight: 600;
  padding-bottom: 8px;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: #4a5568;
  padding: 6px;
}

.checkbox-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 滑块 */
.option-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e2e8f0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  margin-bottom: 0.5rem;
}

.option-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #667eea;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
  transition: all 0.2s ease;
}

.option-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.6);
}

.option-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #667eea;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
}

.slider-marks {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #9ca3af;
}

/* 算法描述 */
.option-description {
  margin-top: 0.5rem;
  padding: 10px 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-left: 3px solid #667eea;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #374151;
}

/* 处理模式选项 */
.mode-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.mode-option {
  position: relative;
  cursor: pointer;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 8px;
  background: white;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mode-option:hover {
  border-color: #667eea;
  background: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(102, 126, 234, 0.15);
}

.mode-option.active {
  border-color: #667eea;
  background: linear-gradient(135deg, #667eea08 0%, #764ba208 100%);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.08);
}

.mode-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mode-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.mode-icon {
  font-size: 1.3rem;
  margin-bottom: 0.15rem;
}

.mode-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2937;
}

.mode-desc {
  font-size: 0.7rem;
  color: #6b7280;
}

.mode-option.active .mode-name {
  color: #667eea;
}

.mode-hint {
  margin-top: 0.5rem;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #374151;
  text-align: center;
}

/* 转换按钮 */
.convert-btn {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.convert-btn:disabled {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
  cursor: not-allowed;
  opacity: 0.8;
}

.convert-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.convert-btn:active {
  transform: translateY(-1px);
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-small {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.converting-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 上传状态 */
.upload-status {
  text-align: center;
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: #f9fafb;
  border-radius: 8px;
}

.status-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.25rem 0;
}

.status-hint {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0;
}

/* 工具提示 */
.info-tooltip {
  position: relative;
  display: inline-block;
}

.info-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  cursor: help;
}

.tooltip-content {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  background: #2d3748;
  color: white;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 400;
  width: 280px;
  margin-bottom: 0.5rem;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tooltip-content p {
  margin: 0.5rem 0;
}

.tooltip-content strong {
  color: #667eea;
}

.info-tooltip:hover .tooltip-content {
  display: block;
}

.tips-card {
  margin-top: 24px;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.tips-card h3 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 1.1rem;
}

.tips-card ul {
  margin: 0;
  padding-left: 20px;
  color: #4b5563;
  line-height: 1.8;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .container {
    padding: 40px 3vw;
  }
  
  .workbench {
    grid-template-columns: 1fr;
  }
  
  .upload-section {
    padding: 40px 30px;
    max-width: 95%;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 12px 3vw;
    min-height: auto;
  }
  
  .tips-card {
    padding: 18px;
  }
  
  .header {
    margin-bottom: 12px;
  }
  
  .header h1 {
    font-size: 1.3rem;
    flex-direction: column;
    gap: 8px;
  }
  
  .logo-icon {
    width: 120px;
    height: 90px;
  }
  
  .subtitle {
    font-size: 0.85rem;
    padding: 0 8px;
  }
  
  .upload-section {
    padding: 16px;
    border-radius: 12px;
    overflow: visible;
    min-height: auto;
    padding-bottom: 90px; /* 🔑 为固定按钮留出空间 */
  }
  
  /* 🔑 移动端：为固定按钮留出空间 */
  .workbench {
    padding-bottom: 90px;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    overflow: visible;
    min-height: auto;
  }
  
  .container {
    padding-bottom: 90px;
  }
  
  .upload-area {
    padding: 1.5rem 1rem;
    border-radius: 8px;
  }
  
  .upload-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }
  
  .upload-text {
    font-size: 1rem;
  }
  
  .upload-hint {
    font-size: 0.8rem;
  }
  
  .select-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
    margin-top: 8px;
  }
  
  .preview-section {
    order: 1;
    width: 100%;
    min-height: auto;
    overflow: visible;
  }
  
  .image-preview-wrapper {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .image-preview {
    max-height: 50vh;
    border-radius: 8px;
  }
  
  .options-card {
    order: 2;
    width: 100%;
    min-height: auto;
    overflow: visible;
    gap: 16px;
  }
  
  .options-card h3 {
    font-size: 1rem;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
  }
  
  .size-inputs {
    flex-direction: column;
    gap: 12px;
    /* 🔑 移动端：让宽高输入整体靠左对齐 */
    align-items: flex-start;
    width: 100%;
  }
  
  .size-separator {
    display: none;
  }
  
  /* 🔑 移动端：输入组占满行，贴齐左侧 */
  .size-input-group {
    width: 100%;
    align-items: flex-start;
  }
  
  .mode-options {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .option-group {
    margin-bottom: 0.75rem;
  }
  
  .convert-btn {
    padding: 14px 24px;
    font-size: 1rem;
    border-radius: 10px;
    margin-top: 8px;
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 -4px 20px rgba(102, 126, 234, 0.3);
    width: 100%;
    min-height: 48px;
  }
}

/* 🔑 移动端：固定转换按钮（确保始终可见） */
.mobile-convert-btn-wrapper {
  display: none;
}

@media (max-width: 768px) {
  /* 🔑 移动端：隐藏桌面版转换按钮 */
  .options-card .convert-btn {
    display: none;
  }
  
  /* 🔑 移动端：显示固定转换按钮 */
  .mobile-convert-btn-wrapper {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
  }
  
  .mobile-convert-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }
  
  .mobile-convert-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #5568d3 0%, #6340a0 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
  }
  
  .mobile-convert-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
  }
  
  .mobile-convert-btn:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
  }
  
  .mobile-convert-btn .converting-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .mobile-convert-btn .spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
}

/* 移动端：优化按钮触摸体验 */
@media (max-width: 768px) {
  .select-btn,
  .convert-btn,
  .mode-option {
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }
}

/* 小屏幕手机优化 */
@media (max-width: 480px) {
  .container {
    padding: 8px 2vw;
  }
  
  .tips-card {
    padding: 14px;
  }
  
  .header h1 {
    font-size: 1.1rem;
  }
  
  .logo-icon {
    width: 100px;
    height: 75px;
  }
  
  .subtitle {
    font-size: 0.8rem;
  }
  
  .upload-section {
    padding: 12px;
    overflow: visible;
    min-height: auto;
    padding-bottom: 80px;
  }
  
  .workbench {
    padding-bottom: 80px;
    padding: 12px;
    gap: 12px;
  }
  
  .container {
    padding-bottom: 80px;
  }
  
  .mobile-convert-btn {
    padding: 14px 20px;
    font-size: 1rem;
    min-height: 48px;
  }
  
  .upload-area {
    padding: 1.2rem 0.8rem;
  }
  
  .upload-icon {
    font-size: 2rem;
  }
  
  .upload-text {
    font-size: 0.9rem;
  }
  
  .options-card h3 {
    font-size: 0.95rem;
  }
  
  .options-card {
    overflow: visible;
    padding-bottom: 20px;
  }
  
  .convert-btn {
    min-height: 48px;
  }
}
</style>


